<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>GamesiteBuilder</title>
<!--    <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
		
-->
    <link href="css/style.css" rel="stylesheet">
    <link href="css/reset.css" rel="stylesheet">
    
        <!-- dropdown selector plugin -->
    <link href="css/dd.css" rel="stylesheet">
    <link href="css/skin2.css" rel="stylesheet">
    <link href="css/flags.css" rel="stylesheet">
    </head>
    
    <body>
        <header>
        	<div id="header">
            	<h1 class="logo f_l">
                    <a href="index.html"><img src="img/headerlogo.png" alt="logo" title="Gamesitebuilder"/></a>
                </h1>
            	<!--begin menu-->
               <div id="menu">	
                	
                    <div id="menuinner">
                      
                    	<ul class="site-nav">
                        	<li>
                            	<a href="#" class="site-nav_a" data="#sub-nav1">
                                    <img src="img/icon01.png" />
                                    <span>pc</span>   
                                    <span class="site-nav_selected"></span>                                       
                                </a>
                            </li>
                            <li>
                            	<a href="#" class="site-nav_a" data="#sub-nav2">
                                    <img src="img/icon02.png" /> 
                                	<span>mac</span>   
                                       
                                </a>                             
                            </li>
                            <li>
                            	<a href="#" class="site-nav_a">
                                  <img src="img/icon03.png" /> 
                                    <span>ipad&amp;iphone</span> 
                                     
                                </a>
                            </li>
                            <li>
                            	<a href="#" class="site-nav_a">
                                     <img src="img/icon04.png" /> 
                                    <span>Android</span> 
                                      
                                </a>
                            </li>
                        </ul>
                    </div>                  
                </div> 
                <!--end menu-->

                 <!-- dropdown language  --> 
                 <div id="dropdownouter" class="f_r">                    
                     <select name="countries" id="countries" style="width:105px;">
                          <option value='ad' data-image="img/blank.gif" data-imagecss="flag ad" data-title="Andorra">ad</option>
                          <option value='ae' data-image="img/blank.gif" data-imagecss="flag ae" data-title="United Arab Emirates">ae</option>
                          <option value='af' data-image="img/blank.gif" data-imagecss="flag af" data-title="Afghanistan">af</option>
                          <option value='ag' data-image="img/blank.gif" data-imagecss="flag ag" data-title="Antigua and Barbuda">ag</option>
                          <option value='ai' data-image="img/blank.gif" data-imagecss="flag ai" data-title="Anguilla">ai</option>
                          <option value='al' data-image="img/blank.gif" data-imagecss="flag al" data-title="Albania">al</option>
                     </select>                  
                  </div>                  
                 <!--  end dropdown --> 
                 
                <!-- begin sub-website-menu -->
                <div id="sub-nav1" class="sub-nav_mark active"> 
                	<div class="sub-site-nav">
                            	<a href="#">Zombie</a>                          
                            	<a href="#">GTA</a>                           
                            	<a href="#">Talking</a>                           
                            	<a href="#">Spider</a>                           
                            	<a href="#">Shooting</a>                           
                            	<a href="#">Cars</a>                           
                            	<a href="#">Dora</a>                           
                            	<a href="#">Barbie</a>                           
                            	<a href="#">Ninja</a>                          
                            	<a href="#">Toy</a>                          
                            	<a href="#">Lara</a>                           
                            	<a href="#">Fifa</a>                           
                            	<a href="#">Fruit</a>                          
                            	<a href="#">CS</a>                            
                            	<a href="#">Saga</a>                                
                                <a href="#">Fifa</a>                           
                            	<a href="#">Fruit</a>                            
                            	<a href="#">Video</a>                           
                            	<a href="#">More</a>                          
                        </div>
                 </div>
                 <div id="sub-nav2" class="sub-nav_mark hidden"> 
                	<div class="sub-site-nav">             
                            	<a href="#">Cars</a>                           
                            	<a href="#">Dora</a>                           
                            	<a href="#">Barbie</a>                           
                            	<a href="#">Ninja</a>                          
                            	<a href="#">Toy</a>                          
                            	<a href="#">Lara</a>                           
                            	<a href="#">Fifa</a>                           
                            	<a href="#">Fruit</a>                          
                            	<a href="#">CS</a>                            
                            	<a href="#">Saga</a>                                
                                <a href="#">Fifa</a>                           
                            	<a href="#">Fruit</a>                            
                            	<a href="#">Video</a>                           
                            	<a href="#">More</a>                          
                        </div>
                 </div>
                 <!-- end sub-website-menu -->
                <!--begin banner-->
                <div id="banner">
                	<div class="f_l mtf15">
                    	<h4 class="h4">-Advertisement-</h4>
                        <div class="ad">
                    		<img src="photo/imgad.jpg" />
                        </div>
                    </div>
                    <div class="hotgame f_l">
                    	<h1>hot games</h1>
                        <div class="arr">
                        	<a href="#"><i  class="leftarr"></i></a>
                        	<a href="#"><i  class="rightarr"></i></a>
                        </div>
                        <div class="hotgamelist">
                        	<div class="listitem">
                                <a href="#">
                                   <img src="photo/list1.jpg" />
                                </a>
                                <a href="#" class="item-hover">
                                    <div class="item-hover-bg"></div>
                                    <div class="title">游戏名称</div>
                            	</a>
                            </div>
                            <div class="listitem">
                                <a href="#">
                                   <img src="photo/list1.jpg" />
                                </a>
                                <a href="#" class="item-hover">
                                    <div class="item-hover-bg"></div>
                                    <div class="title">游戏名称</div>
                            	</a>
                            </div>
                            <div class="listitem">
                                <a href="#">
                                   <img src="photo/list1.jpg" />
                                </a>
                                <a href="#" class="item-hover">
                                    <div class="item-hover-bg"></div>
                                    <div class="title">游戏名称</div>
                            	</a>
                            </div>
                            <div class="listitem">
                                <a href="#">
                                   <img src="photo/list1.jpg" />
                                </a>
                                <a href="#" class="item-hover">
                                    <div class="item-hover-bg"></div>
                                    <div class="title">游戏名称</div>
                            	</a>
                            </div>
                            <div class="listitem">
                                <a href="#">
                                   <img src="photo/list1.jpg" />
                                </a>
                                <a href="#" class="item-hover">
                                    <div class="item-hover-bg"></div>
                                    <div class="title">游戏名称</div>
                            	</a>
                            </div>
                            <div class="listitem">
                                <a href="#">
                                   <img src="photo/list1.jpg" />
                                </a>
                                <a href="#" class="item-hover">
                                    <div class="item-hover-bg"></div>
                                    <div class="title">游戏名称</div>
                            	</a>
                            </div>
                            <div class="listitem">
                                <a href="#">
                                   <img src="photo/list1.jpg" />
                                </a>
                                <a href="#" class="item-hover">
                                    <div class="item-hover-bg"></div>
                                    <div class="title">游戏名称</div>
                            	</a>
                            </div>
                            <div class="listitem">
                                <a href="#">
                                   <img src="photo/list1.jpg" />
                                </a>
                                <a href="#" class="item-hover">
                                    <div class="item-hover-bg"></div>
                                    <div class="title">游戏名称</div>
                            	</a>
                            </div>
                        </div>
                        
                    </div>
                </div>
                <!--end banner-->
            </div>
        </header>
        <!--begin container -->
        <div id="container">       
            <div id="main">
                <div id="crumbread">
                    <a href="#">home > </a>
                    <a href="#">gamelists > </a>
                    <a href="#">game description</a>
                </div>
                <!-- begin sidebar-->
                <div id="sidebar" class="f_l">
                    <div id="tags">
                    	<div class="hoticon">                        	
                        	<img src="img/hoticon.PNG" />
                        </div>
                        
                        <h1>tags</h1>
                        <div class="listitemsmall">
                            <a href="#">           
                                <span>Zombie</span>                     
                                <img src="photo/tagicon1.jpg" />
                            </a>
                        </div>
                        <div class="listitemsmall">
                            <a href="#">  
                            	<span>Zombie</span>                              
                                <img src="photo/tagicon1.jpg" />
                            </a>
                        </div>
                        <div class="listitemsmall">
                            <a href="#">  
                                <span>Zombie</span>                              
                                <img src="photo/tagicon1.jpg" />
                            </a>
                        </div>
                        <div class="listitemsmall">
                            <a href="#">
                                <span>Zombie</span>                               
                                <img src="photo/tagicon1.jpg" />
                            </a>
                        </div>
                        <div class="listitemsmall">
                            <a href="#">  
                                <span>Zombie</span>                              
                                <img src="photo/tagicon1.jpg" />
                            </a>
                        </div>
                        <div class="listitemsmall">
                            <a href="#">   
                                <span>Zombie</span>                             
                                <img src="photo/tagicon1.jpg" />
                            </a>
                        </div>
                        <div class="listitemsmall">
                            <a href="#"> 
                                <span>Zombie</span>                               
                                <img src="photo/tagicon1.jpg" />
                            </a>
                        </div>                        
                    </div>
                    <div>
                    	 <h4 class="h4">-Advertisement-</h4>
                         <div  class="sidead">
                             <a href="#">
                                  <img src="" />
                             </a>  
                         </div>
                                             
                    </div>
                </div>
                <!-- end sidebar -->
                <!-- begin right lists -->
                 <div class="lists f_l">                 	
                    <div>                    
                     	<h1 class="ml10">League of Light: Wicked Harvest Collector's Edition</h1>
                        <span  class="f_r"><a href="#"><img src="img/share.jpg" /></a></span>
                    </div> 
                    <div class="smtags">
                    	<h5>tags:</h5>
                        <div class="taglistitem">
                        	<span>Zombie</span>
                            <div>
                            	<img src="photo/tagiconsmallest.jpg" />
                            </div>                           
                        </div>
                        <div class="taglistitem">
                            <span>Zombie</span>
                            <div>
                                <img src="photo/tagiconsmallest.jpg" />
                            </div>
                            
                        </div>
                        <div class="f_r flaglist">
                            <a href="#"><img src="photo/flag1.png" /></a>
                            <a href="#"><img src="photo/flag1.png" /></a>
                            <a href="#"><img src="photo/flag1.png" /></a>
                            <a href="#"><img src="photo/flag1.png" /></a>
                            <a href="#"><img src="photo/flag1.png" /></a>
                            <a href="#"><img src="photo/flag1.png" /></a>
                        </div>
                    </div>
                    
                    <div id="textandad">
                    	  <h4 class="h4">-Advertisement-</h4>
                          <a href="#" class="ad ml10 mr10 mb35 f_l">
                              <img src="photo/imgad.jpg" />
                          </a>                           
                      
                          <p>
                              <span>Description</span>: New York, 1955. It's become dangerous in the city. The mafia is trying to seize power. But recently, a new force appeared. A far more terrible force. Over the last few days, five mafia bosses have disappeared in mysterious circumstances. A strange liquid and a butterfly were found at the scenes of the disappearances. But this isn't what scared the citizens... Children started to disappear in the city. All of them drew exactly the same butterflies before they disappeared. This forced detectives and journalists alike to start their investigations.     
                          </p>
                          <p>
                           strange liquid and a butterfly were found at the scenes of the disappearances. But this isn't what scared the citizens... Children started to disappear in the city. All of them drew exactly the same butterflies 
                           </p>
                      </div>                       
                      <div class="embed f_l">
                          <embed src="photo/video.jpg" style="overflow-y:hidden"></embed>
                          <div class="arr">
                        	<a href="#"><i  class="leftarr1"></i></a>
                        	<a href="#"><i  class="rightarr1"></i></a>
                          </div>
                          <input type="button" class="playbtn"/>
                      </div> 
                      <div class="rating mt20 mb15 f_l">                          
                            <table>
                                <thead>
                                    <tr>
                                        <td>Rating:</td>
                                        <td><img src="img/stars.png" /></td>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>OS:</td>
                                        <td class="fontgray">Windows XP/Vista/7/8</td>
                                    </tr>
                                    <tr>
                                        <td>CPU:</td>
                                        <td class="fontgray">1.6 GHZ</td>
                                    </tr>
                                    <tr>
                                        <td>RAM:</td>
                                        <td class="fontgray">512MB</td>
                                    </tr>
                                    <tr>
                                        <td>Size:</td>
                                        <td class="fontgray">912MB</td>
                                    </tr>
                                    <tr>
                                        <td>Release Date:</td>
                                        <td class="fontgray">November 13, 2014</td>
                                    </tr>
                                </tbody>
                            </table>
                            <div class="midthk">
                                <div class="listitemsmaller">
                                    <a href="#">
                                        <img src="photo/list2.jpg" />
                                    </a>
                                </div>
                                <div class="listitemsmaller">
                                    <a href="#">
                                        <img src="photo/list2.jpg" />
                                    </a>
                                </div>
                                <div class="listitemsmaller">
                                    <a href="#">
                                        <img src="photo/list2.jpg" />
                                    </a>
                                </div>
                            </div>
                        </div>
                    
                       <div id="rightad2" class="f_r">
                            <h4 class="h4">-Advertisement-</h4>
                            <div id="adright">
                                <img src="photo/adright.jpg" />
                            </div>
                       </div>
                    
                     <!-- begin hot tags -->
                   <div  id="hottags" class="lists f_l  ">
                    <h1>HOT TAGS</h1>
                        <div id="allgamelists" >
                               <div class="listitemsmall">
                                <a href="#">
                                   <img src="photo/tagiconsmall.jpg" />
                                   <span>Zombie</span>
                                </a>
                            </div>
                            <div class="listitemsmall">
                                <a href="#">
                                   <img src="photo/tagiconsmall.jpg" />
                                   <span>Zombie</span>
                                </a>
                            </div>
                            <div class="listitemsmall">
                                <a href="#">
                                   <img src="photo/tagiconsmall.jpg" />
                                   <span>Zombie</span>
                                </a>
                            </div>
                            <div class="listitemsmall">
                                <a href="#">
                                   <img src="photo/tagiconsmall.jpg" />
                                   <span>Zombie</span>
                                </a>
                            </div>    
                            <div class="listitemsmall">
                                <a href="#">
                                   <img src="photo/tagiconsmall.jpg" />
                                   <span>Zombie</span>
                                </a>
                            </div>
                            <div class="listitemsmall">
                                <a href="#">
                                   <img src="photo/tagiconsmall.jpg" />
                                   <span>Zombie</span>
                                </a>
                            </div>
                            <div class="listitemsmall">
                                <a href="#">
                                   <img src="photo/tagiconsmall.jpg" />
                                   <span>Zombie</span>
                                </a>
                            </div>
                            <div class="listitemsmall">
                                <a href="#">
                                   <img src="photo/tagiconsmall.jpg" />
                                   <span>Zombie</span>
                                </a>
                            </div>                      
                            <div class="listitemsmall">
                                <a href="#">
                                   <img src="photo/tagiconsmall.jpg" />
                                   <span>Zombie</span>
                                </a>
                            </div>
                            <div class="listitemsmall">
                                <a href="#">
                                   <img src="photo/tagiconsmall.jpg" />
                                   <span>Zombie</span>
                                </a>
                            </div>
                            <div class="listitemsmall">
                                <a href="#">
                                   <img src="photo/tagiconsmall.jpg" />
                                   <span>Zombie</span>
                                </a>
                            </div>
                            <div class="listitemsmall">
                                <a href="#">
                                   <img src="photo/tagiconsmall.jpg" />
                                   <span>Zombie</span>
                                </a>
                            </div>      
                             <div class="listitemsmall">
                                <a href="#">
                                   <img src="photo/tagiconsmall.jpg" />
                                   <span>Zombie</span>
                                </a>
                            </div>
                            <div class="listitemsmall">
                                <a href="#">
                                   <img src="photo/tagiconsmall.jpg" />
                                   <span>Zombie</span>
                                </a>
                            </div>                
                        </div>                        
                    </div>
                    <!-- end hot tags -->
                    
                    <!-- begin hot games -->
                   <div class="lists f_l">
                    <h1>Hot games</h1>
                        <div id="allgamelists">
                            <div class="listitem">
                                <a href="#">
                                   <img src="photo/list3.jpg" />
                                </a>
                                <a href="#" class="item-hover">
                                    <div class="item-hover-bg"></div>
                                    <div class="title">游戏名称</div>
                            	</a>
                            </div>
                            <div class="listitem">
                                <a href="#">
                                   <img src="photo/list3.jpg" />
                                </a>
                                <a href="#" class="item-hover">
                                    <div class="item-hover-bg"></div>
                                    <div class="title">游戏名称</div>
                            	</a>
                            </div>
                            <div class="listitem">
                                <a href="#">
                                   <img src="photo/list3.jpg" />
                                </a>
                                <a href="#" class="item-hover">
                                    <div class="item-hover-bg"></div>
                                    <div class="title">游戏名称</div>
                            	</a>
                            </div>
                            <div class="listitem">
                                <a href="#">
                                   <img src="photo/list3.jpg" />
                                </a>
                                <a href="#" class="item-hover">
                                    <div class="item-hover-bg"></div>
                                    <div class="title">游戏名称</div>
                            	</a>
                            </div>    
                            <div class="listitem">
                                <a href="#">
                                   <img src="photo/list3.jpg" />
                                </a>
                                <a href="#" class="item-hover">
                                    <div class="item-hover-bg"></div>
                                    <div class="title">游戏名称</div>
                            	</a>
                            </div>
                            <div class="listitem">
                                <a href="#">
                                   <img src="photo/list3.jpg" />
                                </a>
                                <a href="#" class="item-hover">
                                    <div class="item-hover-bg"></div>
                                    <div class="title">游戏名称</div>
                            	</a>
                            </div>
                            <div class="listitem">
                                <a href="#">
                                   <img src="photo/list3.jpg" />
                                </a>
                                <a href="#" class="item-hover">
                                    <div class="item-hover-bg"></div>
                                    <div class="title">游戏名称</div>
                            	</a>
                            </div>
                            <div class="listitem">
                                <a href="#">
                                   <img src="photo/list3.jpg" />
                                </a>
                                <a href="#" class="item-hover">
                                    <div class="item-hover-bg"></div>
                                    <div class="title">游戏名称</div>
                            	</a>
                            </div>                      
                            <div class="listitem">
                                <a href="#">
                                   <img src="photo/list3.jpg" />
                                </a>
                                <a href="#" class="item-hover">
                                    <div class="item-hover-bg"></div>
                                    <div class="title">游戏名称</div>
                            	</a>
                            </div>
                            <div class="listitem">
                                <a href="#">
                                   <img src="photo/list3.jpg" />
                                </a>
                                <a href="#" class="item-hover">
                                    <div class="item-hover-bg"></div>
                                    <div class="title">游戏名称</div>
                            	</a>
                            </div>
                            <div class="listitem">
                                <a href="#">
                                   <img src="photo/list3.jpg" />
                                </a>
                                <a href="#" class="item-hover">
                                    <div class="item-hover-bg"></div>
                                    <div class="title">游戏名称</div>
                            	</a>
                            </div>
                            <div class="listitem">
                                <a href="#">
                                   <img src="photo/list3.jpg" />
                                </a>
                                <a href="#" class="item-hover">
                                    <div class="item-hover-bg"></div>
                                    <div class="title">游戏名称</div>
                            	</a>
                            </div>                                        
                        </div>                        
                    </div>
                    <!-- end hot games -->
                 </div>  
              
             </div>     	
        </div>
        <!-- end container -->
       <footer>
        	<div id="footer">
            	<div id="friendlink_outer">
                  <div id="friendlink">
                      <img src="img/logo2.gif" />
                      <div class="f_r followus">
                          <span>follow us</span>
                          <img src="img/icon05.jpg" />
                      </div>
                      
                      <div class="links">
                          <ul class="f_l leftlink">
                              <li class="f_l">
                                  <ul>
                                      <li>
                                          <a href="#"><h3>all games</h3></a>
                                      </li>
                                      <li>
                                          <a href="#">about us</a>
                                      </li>
                                      <li>
                                          <a href="#">contact us</a>
                                      </li>
                                      <li>
                                          <a href="#">Privacy Policy</a>
                                      </li>
                                      <li>
                                          <a href="#">RSS</a>
                                      </li>
                                  </ul>
                              </li>
                               <li class="f_l">
                                  <ul>
                                      <li>
                                          <a href="#"><h3>home</h3></a>
                                      </li>
                                      <li>
                                          <a href="#">Driving</a>
                                      </li>
                                      <li>
                                          <a href="#">kids</a>
                                      </li>
                                      <li>
                                          <a href="#">arcade & action</a>
                                      </li>
                                      <li>
                                          <a href="#">hidden object</a>
                                      </li>
                                      <li>
                                          <a href="#">time management</a>
                                      </li>
                                  </ul>
                              </li>
                              <li class="f_l">
                                  <ul>
                                      <li>
                                          <a href="#"><h3>match 3</h3></a>
                                      </li>
                                      <li>
                                          <a href="#">marble popper</a>
                                      </li>
                                      <li>
                                          <a href="#">adventure</a>
                                      </li>
                                      <li>
                                          <a href="#">strategy</a>
                                      </li>
                                      <li>
                                          <a href="#">puzzle</a>
                                      </li>
                                      <li>
                                          <a href="#">word</a>
                                      </li>
                                  </ul>
                              </li>                          
                          </ul>
                          <ul class="f_r rightnews">
                              <li><h3 style="color:#fff;">Email Newsletters</h3></li>
                              <li><i>Subscribe to receive inspiration, ideas, and news in your inbox</i></li>
                              <li><input type="text" placeholder="Email Address"/></li>
                              <li><input type="button" class="bginput" /></li>
                          </ul>
                      </div>
                    </div>
                </div>
                <div id="cpright_outer">
                	<div id="cpright">
                        <span>Free Online Games</span>
                        <ul>
                            <li><a href="#">Two Player Games &nbsp;&nbsp;&nbsp;|</a></li>
                            <li><a href="#">2p games &nbsp;&nbsp;&nbsp;|</a></li>
                            <li><a href="#">popular flash games &nbsp;&nbsp;&nbsp;|</a></li>
                            <li><a href="#">P5games &nbsp;&nbsp;&nbsp;|</a></li>
                            <li><a href="#">More links</a></li>
                        </ul>
                        <p>Copyright 2011 games-msn.com. All rights reserved</p>
                    </div>
                </div>
            </div>
        </footer>
        
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
		<script src="./js/index.js"></script>
        <script src="./js/jquery.dd.min.js"></script>
              <script language="javascript"> 
              $(document).ready(function(e) { 
                  Index.topnav();
                  //鼠标hover时间，出现游戏名称提示
                  Index.listitemHover();
                  Index.arraction();
                  $("select").msDropdown({roundedBorder:false});  
                   
            });
                  
       </script>
        
<!--        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
            <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>   -->
    </body>
</html>
